import React, { memo } from "react";
import { NavBar } from "react-vant";
import { useNavigate } from "react-router";
import { Tabs } from "react-vant";
import style from './index.module.scss'
const Index: React.FC = memo(() => {
  const navigate = useNavigate();
  const tabList = [
    {
      title: "三甲快问图片咨询",
      content1: "春雨会员快速提问可享受每月2次免费升级三家医院问诊",
      content:'三甲快问图片资讯',
      content2:'为您匹配三甲名医',
      content3:'极速响应，专家接诊',
    },
    {
      title: "图文咨询折扣",
      content: "图文咨询折扣",
      content1: "春雨会员可享受图文咨询8.8折优惠",
      content2: "优惠不限次数",
      content3: "此优惠不适用与'系统指派医生'和图文急诊服务"
    },
    {
      title: "电话咨询折扣",
      content: "电话咨询折扣",
      content1: "春雨会员可享受电话咨询8.8折优惠",
      content2: "优惠不限次数",
      content3: "此优惠不适用于'快捷电话'服务"
    },
    {
      title: "商城会员价",
      content: "商城会员价",
      content1: "专享商城、购药会员价",
    },
    {
      title: "运费劵",
      content: "运费劵",
      content1: "商城、购药会员可享受免运费",
      content2: "每月1次",
      content3:'一次可省￥12起'
    },
    {
      title: "专属健康顾问",
      content: "专属健康顾问",
      content1: "春雨会员尊享1对1专属健康顾问服务",
      content2: "健康顾问可为您提供多项健康服务",
      content3: "1.建立专属电子健康档案",
      content4: "2.给予个体化健康管理",
      content5: "3.日常健康问题咨询",
      content6: "4.病情初步分析判断并安排专科医生进行咨询",
      content7: "5.复杂重疾协调安排全国知名专家，提供、挂号面诊、手术住院等服务"
    },
    {
      title: "终身电子健康档案",
      content: "终身电子健康档案",
      content1: "会员享有西米健康档案空间",
      content2: "可依据会员健康需要，由健康顾问团队维护健康档案和健康数据",
      content3: "会员可随时查看自己的健康档案和健康数据"
    },
  ];
  return (
    <div className={style.yhxqda}>
        
      <NavBar title="详情" leftText="返回" onClickLeft={() => navigate(-1)} />

      <Tabs sticky swipeable>
        {tabList.map((item,index) => (
          <Tabs.TabPane key={index} title={`${item.title}`} >
            <div className={style.yhxqbox}>
             <h2>{item.content}</h2>
             <p>{item.content1}</p>
             <p>{item.content2}</p>
             <p>{item.content3}</p>
             <p>{item.content4}</p>
             <p>{item.content5}</p>
             <p>{item.content6}</p>
             <p>{item.content7}</p>
            </div>
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
  );
})

export default Index;
